<template>
<div class="fixedWrap" :class="{fixed:isFixed}">
  <search-box :searchItem="myData.mdseName"></search-box>
  <div class="wrapper" ref="conWrap">
    <!-- 字体图标 -->
    <!-- <i class="icon-close"></i> -->
    <div class="tabItem" ref="tabItem">
      <div class="sellTime" @click="upToggle(1)" :class="{sellTime1:time,sellTime2:!time,sellTime3:!defaultTime}">上架时间</div>
      <div class="sellPrice" @click="upToggle(2)" :class="{sellTime1:price,sellTime2:!price,sellTime3:!defaultPrice}">价格</div>
      <div class="sellSelec" @click="select">筛选</div>
      <div class="listMenu" @click="toggle" >
        <img v-if="imgFlag" src="../../assets/images/icon/2.png" alt="">
        <img v-else src="../../assets/images/icon/1.png" alt="" >
      </div> 
    </div>
    <div class="goods-wrapper" >
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="500" ref="goodsRef">
        <goodd-item :data1="list" :shopName="$route.query.shopName" :imgFlag="imgFlag"></goodd-item >
      </ul>
    </div>
  </div>
  <selection ref="selection" ></selection>
</div>
</template>
<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
import SearchBox from "../../base/searchBox/searchBox";
import GooddItem from "./goodItem";
import { getStore } from "@/utils/mixin";
import Selection from "@/components/selection/selection";

let fromFlag = false;
export default {
  data() {
    return {
      popupVisible: false,
      imgFlag: true,
      myData: {
        pageIndex: 1,
        pageSize: 10,
        cates: "",
        mdseName: "电脑",
        orderby: "",
        supplier: "",
        brand: "",
        guarantee: ""
      },
      scroll_pageIndex: 1,
      totalCount: "",
      list: [],
      toggleFlag: "price",
      ordered: "", // 排序
      orderWay: "",
      price: false,
      time: false,
      defaultPrice: false,
      // defaultCount: false,
      defaultTime: false,
      scrollHeight: "",
      filter: {},
      brandCheckId: [],
      cateCheckId: [],
      isFixed: false
    };
  },
  mixins: [getStore],
  components: {
    GooddItem,
    SearchBox,
    Selection
  },
  computed: {
    ...mapGetters(["singer", "inputValue", "brandsList", "catesList"])
  },
  created() {
    this.$root.Bus.$on("confirmcon", () => {
      this.getSelectBrand();
      this.getSelectCate();
    });
    this.$root.Bus.$on('closeSelection',()=>{
      this.isFixed=false
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.setSinger("123");
      // console.log(this.getStore("menuFlag"))
      //取数据需要转换成json
      this.imgFlag = JSON.parse(localStorage.getItem("menuFlag"));

      this.myData.mdseName = this.$route.query.mdseName;
      this.myData.cates = this.$route.query.id;
      this.myData.supplier = this.$route.query.shopName;

      if (fromFlag) {
        //input查询
        this.myData.mdseName = this.inputValue;
      }
      this.getItem();
      this.getBrands();
      this.getCates();
      window.addEventListener("scroll", this._scroll);
    });
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === "searchList") {
      fromFlag = true;
    }
    next();
  },
  methods: {
    ...mapActions(["setSinger"]),
    ...mapMutations(["SET_SINGER", "SET_BRANDSLIST", "SET_CATESLIST"]),
    toggle() {
      this.imgFlag = !this.imgFlag;
      localStorage.setItem("menuFlag", this.imgFlag);
    },
    getSelectBrand() {
      this.brandCheckId = [];
      this.brandsList.forEach(item => {
        if (item.checked) {
          this.brandCheckId.push(item.brandId);
        }
      });
      console.log(this.brandCheckId.toString());
    },
    getSelectCate() {
      this.cateCheckId = [];
      this.catesList.forEach(item => {
        if (item.checked) {
          this.cateCheckId.push(item.cateId);
        }
      });
      console.log(this.cateCheckId.toString());
    },
    getItem() {
      this.$axios
        .get(
          process.env.baseUrl + "/web-avicare-1.0/weixin/mall/searchmdsesku",
          {
            // 正常传参 params:this.myData
            params: { params: this.myData }
          }
        )
        .then(res => {
          if (res.data.success) {
            this.dataLoad = true;
            this.myData.pageIndex++;
            this.scroll_pageIndex = this.myData.pageIndex;
            this.list = this.list.concat(res.data.list);
            this.totalCount = res.totalCount;
          }
        })
        .catch(error => {
          console.log(error);
        });
      // this.$axios.get(process.env.mock + "/web-avicare-1.0/weixin/mall/searchmdsesku")
      // .then(res=>{
      //   console.log(res);
      // })
      // .catch(error => {
      //     console.log(error);
      //   });
    },
    filterData() {
      this.filter.supplier = this.$route.query.shopName
        ? this.$route.query.shopName
        : "";
      this.filter.cates = this.$route.query.id ? this.$route.query.id : "";
      this.filter.mdseName = this.$route.query.mdseName
        ? this.$route.query.mdseName
        : "";
      this.filter.brand = this.$route.query.brand
        ? this.$route.query.brand
        : "";
      this.filter.startIndex = 0;
      this.filter.isAvailable = 0;
      this.filter.addressCode = "";
      this.filter.guarantee = "";
      this.filter.uPricePre = "";
      this.filter.uPriceLast = "";
    },
    getBrands() {
      this.filterData();
      this.$axios
        .get(
          process.env.baseUrl +
            "/web-avicare-1.0/weixin/mall/search/searchrelabrand",
          {
            params: { params: this.filter }
          }
        )
        .then(res => {
          let brandsList = res.data.list;
          if (brandsList) {
            brandsList.forEach(item => {
              this.$set(item, "checked", false);
            });
          }
          this.SET_BRANDSLIST(brandsList);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getCates() {
      this.$axios
        .get(
          process.env.baseUrl +
            "/web-avicare-1.0/weixin/mall/search/searchrelacate",
          {
            params: { params: this.filter }
          }
        )
        .then(res => {
          let catesList = res.data.list;
          if (catesList) {
            catesList.forEach(item => {
              this.$set(item, "checked", false);
            });
          }
          this.SET_CATESLIST(catesList);
        })
        .catch(error => {
          console.log(error);
        });
    },
    loadMore() {
      if (
        this.myData.pageIndex > 1 &&
        this.scroll_pageIndex == this.myData.pageIndex
      ) {
        this.loading = true;
        this.getItem();
        this.scroll_pageIndex++;
      } else {
        this.scroll_pageIndex++ > this.totalCount;
        return;
      }
    },
    upToggle(orderWay) {
      this.orderBy(orderWay);
      this.myData.orderby = this.ordered;
      this.list = [];
      this.myData.pageIndex = 1;
      this.getItem();
    },
    orderBy(orderWay) {
      // this.defaultCount = false;
      this.defaultPrice = false;
      this.defaultTime = false;
      if (orderWay === 1) {
        this.defaultTime = true;
        this.time = !this.time;
        this.time ? (this.ordered = "uptime") : (this.ordered = "uptimeDesc");
      } else if (orderWay === 2) {
        this.defaultPrice = true;
        this.price = !this.price;
        this.price ? (this.ordered = "price") : (this.ordered = "priceDesc");
      }
    },
    select() {
      this.isFixed = true;
      this.$refs.selection.show();
    },
    _scroll() {
      this.scrollHeight =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.$refs.tabItem) {
        if (this.scrollHeight >= this.$refs.tabItem.offsetHeight) {
          this.$refs.tabItem.style.top = 0;
        } else {
          this.$refs.tabItem.style.top = "1rem";
        }
      }
    }
  },
   beforeDestroy() {
    this.$root.Bus.$off("confirmcon");
    this.$root.Bus.$off("closeSelection");
  },
  destroyed() {
    window.removeEventListener("scroll", this._scroll);
  }
};
</script>
<style lang="less" scoped>
.fixedWrap {
  .wrapper {
    background: #fff;
    width: 100%;
    height: 100%;
    //字体图标
    // i {
    //   display: block;
    //   height: 0.3rem;
    //   line-height: 0.3rem;
    //   position: fixed;
    //   top: 0;
    //   right: 0.4rem;
    //   &:before {
    //     font-size: 0.3rem;
    //   }
    // }
    .tabItem {
      position: fixed;
      top: 1rem;
      left: 0;
      width: 100%;
      height: 0.8rem;
      background: #fff;
      padding: 0.2rem 0.3rem;
      box-sizing: border-box;
      display: flex;
      z-index: 10;
      .sellTime {
        flex: 1;
        position: absolute;
        left: 0.3rem;
        top: 0.2rem;
        font-size: 0.26rem;
        color: #707070;
        &::after {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: 0.1rem;
          right: -0.28rem;
          border-left: 0.07rem solid transparent;
          border-right: 0.07rem solid transparent;
          border-bottom: 0.07rem solid #707070;
        }
        &::before {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: 0.25rem;
          right: -0.28rem;
          border-left: 0.07rem solid transparent;
          border-right: 0.07rem solid transparent;
          border-bottom: 0.07rem solid #707070;
          transform: rotate(180deg);
        }
      }
      .sellPrice {
        flex: 1;
        position: absolute;
        left: 3rem;
        top: 0.2rem;
        font-size: 0.26rem;
        color: #707070;
        &::after {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: 0.1rem;
          right: -0.28rem;
          border-left: 0.07rem solid transparent;
          border-right: 0.07rem solid transparent;
          border-bottom: 0.07rem solid #707070;
        }
        &::before {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: 0.25rem;
          right: -0.28rem;
          border-left: 0.07rem solid transparent;
          border-right: 0.07rem solid transparent;
          border-bottom: 0.07rem solid #707070;
          transform: rotate(180deg);
        }
      }
      .sellSelec {
        flex: 1;
        position: absolute;
        top: 0.2rem;
        right: 2.02rem;
        font-size: 0.26rem;
        color: #707070;
      }
      .sellTime1 {
        color: #78bfff;
        &::after {
          border-bottom-color: #78bfff;
        }
      }
      .sellTime2 {
        color: #78bfff;
        &::before {
          border-bottom-color: #78bfff;
        }
      }
      .sellTime3 {
        color: #707070;
        &::after {
          border-bottom-color: #707070;
        }
        &::before {
          border-bottom-color: #707070;
        }
      }
      .listMenu {
        flex: 1;
        text-align: left;
        font-size: 0.26rem;
        width: 0.37rem;
        height: 0.37rem;
        position: absolute;
        right: 0.3rem;
        top: 0.2rem;
        img {
          width: 0.37rem;
          height: 0.37rem;
        }
      }
    }
    .goods-wrapper {
      margin-top: 1rem;
    }
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
